<!--
 * @Author: Pure <305737824@qq.com>
 * @CreateTime: 2021-08-30 17:54:34
 * @LastEditors: Pure <305737824@qq.com>
 * @LastEditTime: 2022-03-17 10:59:30
 * @Description: 主面板
-->
<template>
  <el-card class="container">
    <el-row class="base-margin-left" style="height:30px">
      <pure-button-group style="display:inline" :options="groupBtnOptions" default-active="工单" @change="handleTabChange" />
      <span class="todo">
        时间范围
        <el-date-picker
          v-model="queryCondition.dateRange"
          size="mini"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          format="yyyy-MM-dd"
          class="condition date"
          :clearable="false"
          @change="updateRedData"
        />
      </span>
      <span class="data-range">
        显示数据范围
        <!-- <el-select size="mini" /> -->
        <el-select
          v-model="queryCondition.showRange"
          size="mini"
          @change="handleDataRangeChange"
        >
          <el-option
            v-for="(item,index) in dataRangeOption"
            :key="index"

            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </span>
      <span v-if="showTeamMember" class="data-range">
        查看组员
        <el-select
          v-model="queryCondition.sendUser"
          collapse-tags
          multiple
          filterable
          clearable
          size="mini"
          @change="updateRedData"
        >
          <el-option
            v-for="(item,index) in teamMemberOption"
            :key="index"

            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </span>
    </el-row>
    <el-row class="component">
      <component :is="currentTabComponent" ref="tableComponent" :query-data="queryCondition" @update="updateRedData" />
    </el-row>

  </el-card>
</template>

<script>
import TeamApi from '@/apis/system/group';
import HomeApi from '@/apis/home';
import moment from 'moment';
import PureButtonGroup from '@/components/button/buttonGroup.vue';
import MainWorkOrder from './mainWorkOrder.vue';
import MainTask from './mainTask.vue';
import MainResearch from './mainResearch.vue';
import MainInspection from './mainInspection.vue';
import MainProject from './mainProject.vue';
export default {
  components: {
    PureButtonGroup,
    MainWorkOrder,
    MainTask,
    MainResearch,
    MainInspection,
    MainProject,
  },
  data() {
    return {
      groupBtnOptions: [{
        count: null,
        name: '工单',
      }, {
        count: null,
        name: '任务',
      }, {
        count: null,
        name: '调研',
      }, {
        count: null,
        name: '巡检',
      }, {
        count: null,
        name: '项目',
      }],
      todoOptions: [{
        label: '今日待办',
        value: 1,
      }, {
        label: '本周待办',
        value: 2,
      }, {
        label: '本月待办',
        value: 3,
      }],
      dataRangeOption: [{
        label: '查看全部',
        value: -1,
      }, {
        label: '只看自己',
        value: 0,
      }],
      teamMemberOption: [],
      currentTabComponent: 'MainWorkOrder',
      queryCondition: {
        waitWork: 1,
        sendUser: null,
        dateRange: [],
        showRange: 0,
      },
      redDataInterval: null,
      intervalTime: 30000,
    };
  },
  computed: {
    showTeamMember() {
      if (this.queryCondition.showRange === 0 || this.queryCondition.showRange === -1) {
        return false;
      } else {
        return true;
      }
    },
  },
  async created() {
    try {
      const list = await TeamApi.ownTeamList();

      list.map(item => {
        this.dataRangeOption.push({
          label: item.name,
          value: item.id,
        });
      });
      const startDate = moment().startOf('week').add(1, 'days').valueOf();
      const endDate = moment().endOf('week').add(1, 'days').valueOf();
      this.queryCondition.dateRange = [startDate, endDate];
      this.updateRedData(startDate, endDate);
      this.redDataInterval = setInterval(() => {
        this.updateRedData(startDate, endDate);
      }, this.intervalTime);
    } catch (error) {
      this.$message({
        type: 'error',
        message: error,
      });
    }
  },
  destroyed() {
    clearInterval(this.redDataInterval);
  },
  activated() {
    const startDate = moment().startOf('week').add(1, 'days').valueOf();
    const endDate = moment().endOf('week').add(1, 'days').valueOf();
    this.redDataInterval = setInterval(() => {
      this.updateRedData(startDate, endDate);
    }, this.intervalTime);
  },
  deactivated() {
    clearInterval(this.redDataInterval);
  },
  methods: {
    handleTabChange(val) {
      switch (val) {
        case '工单':

          this.currentTabComponent = 'MainWorkOrder';
          break;
        case '任务':
          this.currentTabComponent = 'MainTask';
          break;
        case '调研':
          this.currentTabComponent = 'MainResearch';
          break;
        case '巡检':
          this.currentTabComponent = 'MainInspection';
          break;
        case '项目':
          this.currentTabComponent = 'MainProject';
      }
    },
    async updateRedData(startDate, endDate) {
      console.log('updateRedData');
      const redData = await HomeApi.redData({
        startTime: this.queryCondition.dateRange[0],
        endTime: this.queryCondition.dateRange[1],
        showRange: this.queryCondition.showRange,
        sendUser: this.queryCondition.sendUser?.join(','),
      });
      this.groupBtnOptions = [{
        count: redData.orderCount || null,
        name: '工单',
      }, {
        count: redData.taskCount || null,
        name: '任务',
      }, {
        count: redData.itemDemandCount || null,
        name: '调研',
      }, {
        count: redData.inspectionCount || null,
        name: '巡检',
      }, {
        count: redData.itemCount || null,
        name: '项目',
      }];
    },
    async handleDataRangeChange(showRange) {
      this.queryCondition.sendUser = [];
      this.updateRedData();
      if (showRange === 0 || showRange === -1) {
        this.teamMemberOption = [];

        return;
      }
      this.teamMemberOption = await this.getTeamMember(showRange);
    },
    async fetchData() {

    },
    async getTeamMember(teamId) {
      try {
        const { userObjs, } = await TeamApi.detail(teamId);
        return userObjs.map(item => {
          return {
            label: item.name,
            value: item.id,
          };
        });
      } catch (error) {
        this.$message({
          type: 'error',
          message: error,
        });
        return [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  padding-bottom: 0px;
  ::v-deep .el-card__body {
    height:100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding:14px 0 0 0;

  }
  .component {
    flex:1;

  }
}
.todo,.data-range,.member {
  font-size: 18px;
  font-weight: 400;
  color: #879bba;
  line-height: 14px;
}
.todo {
  margin-left: 50px;
}
.data-range,.member,.todo {
  font-size: 18px;
  margin-left: 32px;
}
.el-row + .el-row {
  padding-top:12px;
}
.condition {
  width: 166px;
  &.date {
    width: 290px;
  }
}
</style>
